<!DOCTYPE html>
<html>
<head>
  <style>
    .active { fill: blue !important;}
          /*.datamaps-key dt, .datamaps-key dd {float: none !important;}
          .datamaps-key {right: -50px; top: 0;}*/
        </style>
      </head>
      <body>

        <div id="container1" style="border:1px dotted blue; width: 700px; height: 475px; position: relative;"></div>
        <script src="/src/js/components/d3/d3.min.js"></script>
        <script src="/src/js/components/topojson/topojson.js"></script>
        <!-- <script src="/src/js/json2.js"></script> -->
        <script src="/src/rel/datamaps.usa.js"></script>
        <script>

          var election = new Datamap({
            scope: 'usa',
            element: document.getElementById('container1'),
            geographyConfig: {
              popupTemplate: function(geo, data) {
                return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
              },
              highlightOnHover: false,
              borderColor: '#444',
              borderWidth: 0.5
            },
            dataUrl: 'data.csv',
            dataType: 'csv',
            data: {},
            fills: {
              'Visited': '#306596',
              'neato': '#0fa0fa',
              'Trouble': '#bada55',
              defaultFill: '#dddddd'
            }
          });

</script>
</body>
</html>